<template>
  <div id="total">
    <!-- 输入框 -->
    <div id="input1" class="mt-4">
      <el-input
        v-model="input"
        placeholder="请输入患者姓名"
        class="input-with-select"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
    <!-- 表格 -->
    <el-table :data="gridData">
      <el-table-column type="selection" width="60" />
      <el-table-column property="bankNname" label="患者姓名" width="120" />
      <el-table-column property="sex" label="性别" width="100" />
      <el-table-column property="age" label="年龄" width="100" />
      <el-table-column property="phone" label="电话" width="160" />
      <el-table-column property="registeredTime" label="挂号时间" width="180" />
      <el-table-column property="registeredType" label="挂号类型" width="120" />
    </el-table>
    <!-- 分页 -->
    <div id="fen">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="50"
        class="mt-4"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
const input = ref("");
const gridData = [
  {
    id: 202302150000100037,
    registeredTime: "2023-02-15 19:18:15",
    registeredType: "急症",
    bankNname: "张三",
    sex: "男",
    age: 22,
    phone: 18328135644,
  },
  {
    id: 202302150000100037,
    registeredTime: "2023-02-15 19:18:15",
    registeredType: "急症",
    bankNname: "张三",
    sex: "男",
    age: 22,
    phone: 18328135644,
  },
];
</script>
<style scoped>
#input1 {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 400px;
  display: flex;
   ;
  margin-left: 200px;
}
#total {
  display: flex;
   
  justify-content: center;
}
#fen{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>
